<template>
<div class="top-category">
    <div class="container">
     <!-- 面包屑 -->
     <XtxBread>
         <XtxBreadItem to="/">首页</XtxBreadItem>
         <Transition name="fade-right" mode="out-in">
             <XtxBreadItem :key="topCategory.id">{{  topCategory.name  }}</XtxBreadItem>
         </Transition>
     </XtxBread>
     <!-- 轮播图 -->
      <XtxCarousel :sliders="sliders" style="height: 500px;" auto-play></XtxCarousel>
     <!-- 全部分类 -->
     <div class="sub-list">
         <h3>全部分类</h3>
         <ul>
             <li v-for="item in topCategory.children" :key="item.id">
                 <a href="javascript:">
                     <img :src="item.picture" alt="">
                     <p>{{  item.name  }}</p>
                 </a>
             </li>
         </ul>
     </div>   
     <!-- 各个分类推荐商品 -->
        <div class="ref-goods" v-for="item in subList" :key="item.id">
            <div class="head">
                <h3>-{{ item.name }}-</h3>
                <p class="tag">{{ item.desc }}</p>
                <XtxMore></XtxMore>
            </div>
            <div class="body">
                <GoodsItem v-for="goods in item.goods" :key="goods.id" :goods="goods"></GoodsItem>
            </div>
        </div>
    </div>
</div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { getBanner } from '@/api/home'
import { getTopCategory } from '@/api/category'
import { useCategoryStore } from '@/stores'
import { useRoute } from 'vue-router'
import XtxBread from "@/components/library/xtx-bread.vue";
import XtxBreadItem from "@/components/library/xtx-bread-item.vue";
import XtxCarousel from "@/components/library/xtx-carousel.vue";
import XtxMore from "@/components/library/xtx-more.vue";
import GoodsItem from "@/views/category/components/goods-item.vue";

onMounted(() => {
    getBannerList()
})
// 轮播图
const sliders = ref([])
const getBannerList = async () => {
    const { result } = await getBanner()
    sliders.value = result
}

// 面包屑 + 所有分类
const route = useRoute()
const store = useCategoryStore()
const topCategory = computed(() => {
    let cate = {}
    const item = store.categoryList.find(item => {
        return item.id === route.params.id
    })
    if (item) cate = item
    return cate
})

// 推荐商品
const subList = ref([])
const getSubList = async () => {
    const { result } = await getTopCategory(route.params.id)
    subList.value = result.children
}

watch(() => route.params.id, (newVal) => {
    if (newVal && `/category/${newVal}` === route.path) getSubList()
}, { immediate: true })
</script>

<style scoped lang="less">
@import "@/assets/styles/variables";
.top-category {
    h3 {
        font-size: 28px;
        color: #666;
        font-weight: normal;
        text-align: center;
        line-height: 100px;
    }
    .sub-list {
        margin-top: 20px;
        background-color: #fff;
        ul {
            display: flex;
            padding: 0 32px;
            flex-wrap: wrap;
            li {
                width: 168px;
                height: 160px;
                a {
                    text-align: center;
                    display: block;
                    font-size: 16px;
                    img {
                        width: 100px;
                        height: 100px;
                    }
                    p {
                        line-height: 40px;
                    }
                    &:hover {
                        color: @xtxColor;
                    }
                }
            }
        }
    }
  .ref-goods {
    position: relative;
    margin-top: 20px;
    background-color: #fff;
    .head {
      .xtx-more {
        position: absolute;
        top: 20px;
        right: 20px;
      }
      .tag {
        position: relative;
        top: -20px;
        text-align: center;
        color: #999;
        font-size: 20px;
      }
    }
    .body {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding: 0 65px 30px;
    }
  }
}
</style>